<template>
	<view class="content">
		<u-sticky>
			<div class="header">
				<div class="search" @click="onToSearch">
					<u-icon name="search" color="#000000" size="24" />
					<div style="margin-left: 12rpx;">搜索你感兴趣的内容</div>
				</div>
			</div>
			<view style="background: #fff;height: 50px">
				<u-tabs :list="tabList2" :active-style="{
            color: '#000',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
          }" :inactive-style="{
            color: '#838383',
            transform: 'scale(1)'
          }" line-height="4" line-color="#78FFE6" line-width="50" @change="mainTabChange" />
			</view>
		</u-sticky>

		<!-- 青币广场 -->
		<scroll-view v-if="currentIndex == 0" scroll-y class="qbgc-scroll-view" @scrolltolower="onLoadMoreQbgcList">
			<view class="swiper-box">
				<img v-if="swiperList.length === 1" :src="swiperList[0]" class="single-banner"
					:style="{height: '150px'}">
				<u-swiper v-else circular indicator radius="8" height="194" duration="1000" interval="5000"
					next-margin="50" :list="swiperList" indicator-mode="dot" indicator-active-color="#78ffe6"
					@click="swiperClick" />
			</view>

			<view class="top-talk">
				<view class="top-talk-title">热门话题</view>
				<view class="top-talk-right" @click="onToTopic">
					话题广场 <u-icon name="arrow-right" color="rgba(0,0,0,0.5)" size="12" />
				</view>
			</view>
			<HorizontalList :list="talk_list" />

			<div style="margin: 0 20rpx;">
				<capsule-tab :tab-list="tabList" @tabChange="tabChange" />
			</div>

			<video-list v-if="tabActiveName === '官方专区'" :video-list="videoList" @onStar="onStar" />
			<u-empty v-if="tabActiveName === '官方专区' && videoList.length === 0" mode="data" margin-top="20"
				text="暂无帖子数据" />

			<WaterfallList v-if="tabActiveName === '推荐' && recommendListData.length"
				:outside-list="recommendListData" />
			<u-empty v-if="tabActiveName === '推荐' && recommendListData.length === 0" mode="data" margin-top="20"
				text="暂无帖子数据" />

			<WaterfallList v-if="tabActiveName === '最新发布' && newListData.length" :outside-list="newListData" />
			<u-empty v-if="tabActiveName === '最新发布' && newListData.length === 0" mode="data" margin-top="20"
				text="暂无帖子数据" />
		</scroll-view>

		<!-- 赚青币 -->
		<view v-if="currentIndex == 1">
			<div style="margin: 20rpx;">
				<sign-in />
			</div>
			<div style="margin: 20rpx;">
				<task-list :reward_list="reward_list" />
			</div>
		</view>

		<!-- 创作中心 -->
		<scroll-view v-if="currentIndex == 2" scroll-y class="create-center" @scrolltolower="onLoadMoreList">
			<u-sticky z-index="999">
				<view style="background: #F5F5F5">
					<div class="user">
						<u-avatar :src="userInfo.avatar" size="87" />
						<!-- <div class="user-avatar">
              <u-icon name="account" color="rgba(0, 0, 0, 0.5)" size="36" />
            </div> -->
						<div class="user-right">
							<div class="user-name">{{ userInfo.name }}</div>
							<div class="user-desc">
								<div class="user-item">
									<div class="user-num">{{ countData.like_num || 0 }}</div>
									<div class="user-text">获得的赞</div>
								</div>
								<div class="user-item">
									<div class="user-num">{{ countData.favorite_num || 0 }}</div>
									<div class="user-text">获得收藏</div>
								</div>
							</div>
						</div>
					</div>

					<div style="margin: 0 20rpx;">
						<capsule-tab :tab-list="tabList3" @tabChange="onTab3Change" />
					</div>

					<div v-if="curTab3 === 1" style="margin: 20rpx 46rpx;">
						<button-tab :data="countData" @update="onFilterUpdate" />
					</div>
				</view>
			</u-sticky>

			<!-- 创作发贴 -->
			<block v-if="curTab3 === 1">
				<u-empty v-if="listDataEmpty" mode="data" margin-top="20" text="暂无帖子数据" />
				<WaterfallList v-else :outside-list="listData" :need-delete="true" @delete="onDelete" />
			</block>

			<!-- 赞过 -->
			<block v-if="curTab3 === 2">
				<u-empty v-if="likeListEmpty" mode="data" margin-top="20" text="暂无帖子数据" />
				<WaterfallList v-else :outside-list="likeList" />
			</block>

			<!-- 收藏 -->
			<block v-if="curTab3 === 3">
				<u-empty v-if="favoriteListEmpty" mode="data" margin-top="20" text="暂无帖子数据" />
				<WaterfallList v-else :outside-list="favoriteList" />
			</block>
		</scroll-view>

		<fixed-entry from="1" />
		<view v-if="!isLogin" class="login-mask">
			<get-phone />
		</view>

		<!-- 埋点倒计时 -->
		<view v-if="isStartTask" class="count-down-wrap">
			浏览{{ taskSeconds }}秒
		</view>

		<u-modal :show="modalConfig.show" :title="modalConfig.title" :content="modalConfig.content"
			@confirm="onModalConfirm" />
	</view>
</template>
<script>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import VideoList from './components/diary/VideoList.vue'
	import WaterfallList from './components/diary/WaterfallList.vue'
	import HorizontalList from './components/diary/HorizontalList.vue'
	import CapsuleTab from './components/diary/CapsuleTab.vue'
	import SignIn from './components/diary/SignIn.vue'
	import TaskList from './components/diary/TaskList.vue'
	import ButtonTab from './components/diary/ButtonTab.vue'
	import {
		wx_talk_subject_post_list,
		wx_talk_subject_post_like,
		wx_talk_subject_list,
		wx_cus_subject_post_data,
		wx_cus_subject_post_list,
		wx_cus_post_like_list,
		wx_cus_post_favorite_list,
		wx_talk_subject_post_del,
		wx_customer_clockin_renum,
		wx_customer_reward_list
	} from '@/api'
	import {
		getCurrentPageConfigByName,
		getImg,
		getImgs,
		execFn
	} from '@/utils'
	import {
		mapState
	} from 'vuex'
	import shareMixin from '../mixins/shareMixin.js'
	export default {
		components: {
			VideoList,
			WaterfallList,
			HorizontalList,
			CapsuleTab,
			SignIn,
			TaskList,
			ButtonTab
		},
		mixins: [shareMixin],
		data() {
			return {
				listData: [],
				listDataEmpty: false,
				tabList: [{
					name: '官方专区',
					active: true,
					index: 1
				}, {
					name: '推荐',
					active: false,
					index: 2
				}, {
					name: '最新发布',
					active: false,
					index: 3
				}],
				tabList2: [{
					name: '青币广场'
				}, {
					name: '赚青币'
				}, {
					name: '创作中心'
				}],
				swiperList: [],
				currentIndex: 0,
				tabList3: [{
					name: '创作发帖',
					active: true,
					index: 1
				}, {
					name: '赞过',
					active: false,
					index: 2
				}, {
					name: '收藏',
					active: false,
					index: 3
				}],
				curTab3: 1,
				newListData: [], // 最新发布
				recommendListData: [], // 推荐列表
				// 官方帖子列表
				videoList: [],
				talk_list: [],
				isEmpty: false,
				likeList: [],
				likeListEmpty: false,
				favoriteList: [],
				favoriteListEmpty: false,
				countData: {}, // 发贴相关统计数据
				status: 5,
				qsChildTabIdx: 1,
				pagination: {
					video: {
						offset: 0,
						count: 20
					},

					created: {
						offset: 0,
						count: 20
					},
					like: {
						offset: 0,
						count: 20
					},
					favorite: {
						offset: 0,
						count: 20
					}
				},

				isStartTask: false,
				taskTimer: null,
				taskSeconds: 30,
				modalConfig: {
					show: false,
					title: '温馨提示',
					content: '恭喜您获得一次补卡机会，去打卡领青币吧！'
				},
				reward_list: []
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo']),
			tabActiveName() {
				return this.tabList.find(item => item.active)?.name
			}
		},
		watch: {
			currentIndex: {
				handler(val) {
					if (val === 2) {
						this.wx_cus_subject_post_data()
						this.getListData()
					}
				}
			}
		},
		async onLoad() {
			this.wx_talk_subject_post_list()
			this.wx_talk_subject_list()
			this.wx_cus_subject_post_data()
			uni.$on('article-add-success', () => {
				this.currentIndex = 2
				this.wx_cus_subject_post_data()
				this.listData = []
				this.getListData()
			})
			getCurrentPageConfigByName('青币广场顶部轮播图').then(res => {
				if (res && res.app_path_set_dt) {
					this.swiperList = res.app_path_set_dt.filter(item => item.image).map(item => getImg(item
						.image))
					this.swiperSouceList = res.app_path_set_dt
				}
			})
		},

		onShow() {
			this.startTask()
			wx_customer_reward_list().then(res => {
				this.reward_list = res.reward_list
			})
		},
		onHide() {
			uni.setStorageSync('is_get_chance', 0)
			this.stopTask()
		},
		methods: {
			startTask() {
				const _this = this
				const isStart = uni.getStorageSync('is_get_chance')
				this.isStartTask = isStart === 1
				if (isStart) {
					this.taskTimer = setInterval(() => {
						_this.taskSeconds--
						if (_this.taskSeconds === 0) {
							_this.stopTask()
							wx_customer_clockin_renum().then(() => {
								uni.$emit('get-chance-success', {
									data: 1
								})
								_this.modalConfig.show = true
							})
						}
					}, 1000)
				}
			},

			stopTask() {
				clearInterval(this.taskTimer)
				this.taskTimer = null
				this.taskSeconds = 30
				this.isStartTask = false
			},

			onModalConfirm() {
				this.modalConfig.show = false
			},

			swiperClick(index) {
				if (this.swiperSouceList && this.swiperSouceList[index].url) {
					execFn(this.swiperSouceList[index].url)
				}
			},
			onToSearch() {
				this.$utils.navigateToPage('/pagesSearch/index')
			},
			onStar(type, index) {
				if (type == 1) {
					wx_talk_subject_post_like({
						post_id: this.videoList[index].id,
						is_enable: true
					})
					this.videoList[index].is_like = true
					this.videoList[index].like_num += 1
				}
			},
			mainTabChange(item) {
				this.currentIndex = item.index
				if (item.index === 2) {
					this.status = 5
					this.listData = []
					this.likeList = []
					this.favoriteList = []
				}
			},
			tabChange(obj, list) {
				this.tabList = list
				this.pagination.video.offset = 0
				this.videoList = []
				this.recommendListData = []
				this.newListData = []
				this.qsChildTabIdx = obj.index
				this.wx_talk_subject_post_list()
			},
			onToTopic() {
				this.$utils.navigateToPage('/pagesTopic/list')
			},

			onTab3Change(obj, list) {
				const {
					index
				} = obj
				this.status = 5
				this.curTab3 = index
				this.tabList3 = list
				this.pagination.created.offset = 0
				this.pagination.like.offset = 0
				this.pagination.favorite.offset = 0
				this.listData = []
				this.likeList = []
				this.favoriteList = []
				this.getListData()
			},

			// 审核条件
			onFilterUpdate(value) {
				this.status = value
				this.pagination.created.offset = 0
				this.listData = []
				this.getListData()
			},

			// 加载更多青币广场模块列表数据
			onLoadMoreQbgcList() {
				console.log('加载更多青币广场模块列表数据')
				this.pagination.video.offset += this.pagination.video.count
				this.wx_talk_subject_post_list()
			},

			// 创作中心列表：加载更多
			onLoadMoreList() {
				console.log('创作中心列表：加载更多')
				const fnEnum = {
					1: () => {
						this.pagination.created.offset += this.pagination.created.count
					},
					2: () => {
						this.pagination.like.offset += this.pagination.like.count
					},
					3: () => {
						this.pagination.favorite.offset += this.pagination.favorite.count
					}
				}
				fnEnum[this.curTab3]()
				this.getListData()
			},

			// 帖子删除
			async onDelete(data) {
				const id = data.id
				await wx_talk_subject_post_del({
					id
				})
				this.$utils.showToast('删除成功')
				// 删除成功后更新列表和统计数据
				this.wx_cus_subject_post_data()
				this.pagination.created.offset = 0
				this.listData = []
				this.getListData()
			},

			async getListData() {
				const _this = this
				const fnEnum = {
					1: async function() {
						// 获取当前会员发贴列表
						const params = {
							status: _this.status,
							..._this.pagination.created
						}
						const {
							post_list
						} = await wx_cus_subject_post_list(params)

						const formatList = post_list.map(e => {
							e.image = getImg(e.image)
							return e
						})
						_this.listData = _this.listData.concat(formatList)
						_this.listDataEmpty = _this.listData.length === 0
						console.log('最新帖子')
						console.log(_this.listData)
					},
					2: async function() {
						// 获取点赞列表
						const {
							like_list
						} = await wx_cus_post_like_list(_this.pagination.like)
						const formatList = like_list.map(e => {
							e.image = getImg(e.image)
							return e
						})
						_this.likeList = _this.likeList.concat(formatList)
						_this.likeListEmpty = _this.likeList.length === 0
					},
					3: async function() {
						// 获取收藏列表
						const {
							favorite_list
						} = await wx_cus_post_favorite_list(_this.pagination.favorite)
						const formatList = favorite_list.map(e => {
							e.image = getImg(e.image)
							return e
						})
						_this.favoriteList = _this.favoriteList.concat(formatList)
						_this.favoriteListEmpty = _this.favoriteList.length === 0
					}
				}
				fnEnum[this.curTab3]()
			},

			async wx_talk_subject_list() {
				const res = await wx_talk_subject_list()
				console.log('对接了数据--->', res)
				this.talk_list = res.talk_list.map(e => {
					const {
						cover_img
					} = e
					e.cover_img_src = cover_img ? getImg(cover_img) : ''
					console.log('封面图--->', e.cover_img_src)
					return e
				})
			},
			async wx_talk_subject_post_list() {
				const type = this.qsChildTabIdx
				const res = await wx_talk_subject_post_list({
					type,
					...this.pagination.video
				})
				if (type === 1) {
					const formatList = res.post_list.map(item => {
						if (item.video) {
							item.videoSrc = getImg(item.video)
						}
						if (item.image) {
							item.imageList = getImgs(item.image)
						}
						return item
					})
					this.videoList = this.videoList.concat(formatList)
				}
				if (type === 2 || type === 3) {
					const formatList = res.post_list.map(e => {
						e.image = getImg(e.image)
						return e
					})
					if (type === 2) {
						this.recommendListData = this.recommendListData.concat(formatList)
					}
					if (type === 3) {
						this.newListData = this.newListData.concat(formatList)
					}
				}
			},

			// 获取当前会员发贴数据
			async wx_cus_subject_post_data() {
				const {
					post_data
				} = await wx_cus_subject_post_data()
				// console.log('当前会员发贴数据')
				// console.log(post_data)
				this.countData = post_data
			},

			// async wx_talk_subject_list() {
			//   const res = await wx_talk_subject_list()
			//   this.talk_list = res.talk_list.map(item => {
			//     if (item.image) {
			//       item.imgSrc = getImg(item.image)
			//     }
			//     return item
			//   })
			// }
		}
	}
</script>
<style scoped lang="scss">
	.login-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.qbgc-scroll-view {
		height: calc(100vh - 200rpx - 50px);
	}

	.create-center {
		height: calc(100vh - 200rpx - 50px);
	}

	.user {
		height: 200rpx;
		display: flex;
		align-items: center;
		margin: 0 46rpx 40rpx;

		&-avatar {
			width: 174rpx;
			height: 174rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #D8D8D8;
			border-radius: 750rpx;
			border: 3rpx solid #FFFFFF;

		}

		&-right {
			margin-left: 20rpx;
		}

		&-name {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}

		&-desc {
			display: flex;
			margin-top: 28rpx;
		}

		&-item {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			margin-right: 56rpx;
		}

		&-num {
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			line-height: 50rpx;
			font-style: normal;
		}

		&-text {
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 34rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.search {
		width: 442rpx;
		height: 64rpx;
		background: #F3F3F3;
		border-radius: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.4);
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		display: flex;
		align-items: center;
		margin-left: 24rpx;
	}

	.header {
		height: 200rpx;
		background: #fff;
		display: flex;
		align-items: flex-end;
		padding-bottom: 40rpx;

		.search {
			padding-left: 24rpx;
		}
	}

	.swiper-box {
		padding: 20rpx 0;
		// background: #fff;
		padding-left: 20rpx;

		::v-deep.u-swiper__wrapper__item {
			box-sizing: border-box;
			padding-right: 30rpx;
		}
	}

	.top-talk {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 46rpx;

		&-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}

		&-right {
			font-weight: 500;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 40rpx;
			text-align: left;
			display: flex;
			align-items: center;
		}
	}

	.count-down-wrap {
		z-index: 999;
		position: fixed;
		right: 0;
		top: 210rpx;
		height: 60rpx;
		padding: 0 20rpx;
		border-radius: 50rpx 0 0 50rpx;
		@include flex-center;
		background-color: #919294;
		font-size: 30rpx;
		color: #FFF;
	}
</style>